<script setup>
import '../../assets/data'
import axios from 'axios'
import {ref,onMounted} from 'vue'
let arr = ref(null)
onMounted(()=>{
    axios.get('/api/pszxq').then(res =>{
        arr.value = res.data.data
    })
})
</script>
<template>
    <div class="gaga">
        <div class="qb" v-for="(item,index) in arr" :key="index">
            <div class="bh">
                <!-- 编号 -->
                <span>订单编号:{{ item.bianhao }}</span>
                <div class="duihao">√</div>
            </div>
            <div class="sp">
                <!-- 商品信息 -->
                <span>商品信息</span><br>
                <span class="mb">{{item.spm[index]}}x1,{{item.spm[index+1]}}x2</span>
            </div>
            <div class="sh">
                <!-- 收货人信息 -->
                <ul>
                    <li>收货人信息</li>
                    <li>
                        <span>{{item.name[index]}}</span>
                        <img class="www" :src="item.img" alt="">
                        <a href="" class="wwww">打电话</a>
                    </li>
                    <li>{{ item.dizhi }}</li>
                </ul>
            </div>
            <div class="jh">
                <!-- 接货信息 -->
                <ul>
                    <li>接货信息</li>
                    <li>
                        <span>{{item.name[index+1]}}</span>
                        <img class="www" :src="item.img" alt="">
                        <a href="" class="wwww">打电话</a>
                    </li>
                    <li>{{ item.dizhi }}</li>
                </ul>
            </div>
            <div class="sj">
                <!-- 订单时间 -->
                <span>01:00</span><br>
                <span class="sd">20分钟内未送达 订单自动取消</span>
            </div>
        </div>
    </div>
</template>
<style scoped>
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.www{
    width: 30px;
    height: 30px;
    margin-left: 190px;
    border-radius: 50%;
}
.wwww{
    margin-left: 20px;
}
.gaga {
    width: 350px;
    background-color: white;
    border: #ccc 1px solid;
    height: 550px;
    margin: 0 auto;
    /* border: 1px red solid; */
}
.qb{
    width: 330px;
    margin: 0 auto;
}

.bh {
    width: 330px;
    border-bottom: 1px #999 solid;
    height: 40px;
    padding-top: 12px;
    display: flex;
}
.bh>span{
    font-size: 12px;
    color: #999;
    font-weight: bold;
}
.duihao{
    width: 20px;
    height: 20px;
    border: 1px solid red;
    border-radius: 50%;
    margin-left:150px;
    text-align: center;
}
.sp{
    border-bottom: 1px #999 solid;
    height: 70px;
    padding-top: 7px;
    line-height: 25px;
}
.sp span:nth-child(1){
    font-size: 12px;
    color: #999;
    font-weight: bold;
}
.mb{
    font-size: 17px;
    font-weight: bold;
}
.sh{
    border-bottom: 1px #999 solid;
    height: 96px;
    padding-top: 5px;
}
.sh ul{
    list-style: none;
    line-height: 28px;
}
.sh ul li:nth-child(1){
    font-size: 12px;
    font-weight: bold;
    color: #999;
}
.sh ul li:nth-child(2){
    font-size: 17px;
    font-weight: bold;
    display: flex;
    /* justify-content: space-between; */
}
.sh ul li:nth-child(3){
    font-size: 16px;
    color: #999;
    font-weight: bold;
}

.jh{
    border-bottom: 1px #999 solid;
    height: 96px;
    padding-top: 5px;
}
.jh ul{
    list-style: none;
    line-height: 28px;
}
.jh ul li:nth-child(1){
    font-size: 12px;
    font-weight: bold;
    color: #999;
}
.jh ul li:nth-child(2){
    font-size: 17px;
    font-weight: bold;
    display: flex;
}
.jh ul li:nth-child(3){
    font-size: 16px;
    color: #999;
    font-weight: bold;
}
.sj{
    height:110px ;
    text-align: center;
    padding-top: 80px;
    line-height: 36px;
}
.sj span:nth-child(1){
    font-size: 34px;
    color: #999;
}
.sd{
    font-size: 18px;
    color: #999;
}
</style>